<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>

<h:body>
	<ui:composition template="/WEB-INF/facelets/template.xhtml">

		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Cargando"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>

				<h:form id="form">

					<p:panel id="panel2">

						<p:growl id="msg2" />

						<p:panel id="panelUsuario" header="Matricula Academica">
							<p:dataTable id="tabla"
								value="#{matriculaAsignaturaView.asignaturaModel2}" var="td" 
								selection="#{matriculaAsignaturaView.selectedAsignatura2}"  
								paginator="true" rows="10">

								<p:column selectionMode="single" style="width:2%" />

								<p:column filterBy="#{td.idAsignatura}"
									sortBy="#{td.idAsignatura}">
									<f:facet name="header">
										<h:outputText value="Id Asignatura" />
									</f:facet>
									<h:outputText value="#{td.idAsignatura}" />
								</p:column>
								
                                <p:column filterBy="#{td.nombre}"
									sortBy="#{td.nombre}">
									<f:facet name="header">
										<h:outputText value="Nombre" />
									</f:facet>
									<h:outputText value="#{td.nombre}" />
								</p:column>

								<f:facet name="footer">
									<p:commandButton id="createButton" value="Adicionar Asignatura"
										icon="ui-icon-newwin"
										update=":form" binding="#{usuarioView.btnCrear}" 
										oncomplete="PF('singleCarDialog').show()" />

									<p:commandButton id="viewButton" value="Quitar Asignatura"
										action="#{matriculaAsignaturaView.quitar}" icon="ui-icon-pencil"
										update=":form" binding="#{usuarioView.btnModify}" />
								</f:facet>
								
							</p:dataTable>

							<p:dialog id="dialogo" position="top" header="Detalle Asignatura"
								modal="true" widgetVar="singleCarDialog" resizable="false"
								showEffect="fade" hideEffect="explode" closable="false">

								<p:growl id="msg" />
								
								<h:panelGrid  id="panelTabla" style="margin: 0 auto;">
								
								<p:panel header="Asignaturas"  toggleable="true">
								
								<p:dataTable id="tabla2"
								value="#{matriculaAsignaturaView.asignaturaModel}" var="td" 
								selection="#{matriculaAsignaturaView.selectedAsignatura}" 
								paginator="true" rows="10">

								<p:column selectionMode="single" style="width:2%" />

								<p:column filterBy="#{td.idAsignatura}"
									sortBy="#{td.idAsignatura}">
									<f:facet name="header">
										<h:outputText value="Id Asignatura" />
									</f:facet>
									<h:outputText value="#{td.idAsignatura}" />
								</p:column>
								
                                <p:column filterBy="#{td.nombre}"
									sortBy="#{td.nombre}">
									<f:facet name="header">
										<h:outputText value="Nombre Asignatura" />
									</f:facet>
									<h:outputText value="#{td.nombre}" />
								</p:column>
								
							</p:dataTable>
							
							</p:panel>
								
								</h:panelGrid>
							    
								<p:separator id="separator" />
								
									<h:panelGrid id="panelBotones" columns="3" style="margin: 0 auto;">

									<p:commandButton id="btnGuardar" value="Guardar"
										action="#{matriculaAsignaturaView.adicionar}"
										binding="#{matriculaAsignaturaView.btnSave}" icon="ui-icon-disk"
										update="msg,panelBotones,msg2,dialogo,tabla" />

									<p:commandButton id="btnCerrar" value="Cerrar"
										icon="ui-icon-close" update=":form"
										oncomplete="PF('singleCarDialog').hide()" process="@this"
										actionListener="#{matriculaAsignaturaView.cerrar}"> 
									</p:commandButton>			

								</h:panelGrid>

							</p:dialog>

						</p:panel>
						
						<h:panelGrid style="margin: 0 auto;">
						
                                    <p:commandButton id="btnGM" value="Guardar Materias"
										icon="ui-icon-disk" update=":form"
										action="#{matriculaAsignaturaView.guardarMatricula}" >
									</p:commandButton>	
									
					   </h:panelGrid>
					  
					</p:panel>

				</h:form>

			</f:view>
		</ui:define>

	</ui:composition>

</h:body>

</html>	